<template>
  <div class="app-container">
    <div class="filter-container">
      <org-unit-select v-model="filters.orgUnitId" placeholder="请选择店铺" :org-unit-type="1"/>
      <room-select v-model="filters.roomId" placeholder="请选择房间" :org-unit-id="filters.orgUnitId"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <div v-if="false" style="margin-left: 3.125rem;">
        <el-checkbox v-for="col in dynamicColumn.chargeRecords" v-model="col.show" class="filter-item" style="margin-left:10px;" @change="tableKey=tableKey+1">
          {{ col.name }}
        </el-checkbox>
      </div>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      border
      fit
      :height="tableHeight"
      :data="list"
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="selsChange"
    >
      <el-table-column type="index" width="60" />
      <el-table-column prop="roomName" label="房间" min-width="120" />
      <el-table-column prop="orgUnitName" label="店铺" min-width="120" />
      <el-table-column prop="state" label="状态" width="100" :formatter="formatState" />
      <el-table-column prop="payType" label="充值方式" width="160" :formatter="formatPayType"/>
      <el-table-column prop="amount" label="金额(元)" width="100" :formatter="formatAccount" />
      <el-table-column prop="prepareDate" label="开始时间" width="200" />
      <el-table-column prop="endTime" label="结束时间" width="200" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="filters.page" :limit.sync="filters.limit" @pagination="loadPageList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import OrgUnitSelect from '@/views/components/org-unit-select'
import RoomSelect from '@/views/components/room-select'
import waves from '@/directive/waves'
import { mapGetters } from 'vuex'
import { listChargeRecords } from '@/api/charge-records'
import Rooms from '@/views/rooms/rooms'

export default {
  name: 'ChargeRecords',
  components: { Rooms, Pagination, OrgUnitSelect, RoomSelect },
  directives: { waves },
  data() {
    return {
      tableHeight: 260,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      sels: [], // 列表选中列
      filters: {
        page: 1,
        limit: 20,
        orgUnitId: null,
        roomId: null
      },
      orderBy: {
        orderColumn: '',
        order: ''
      }
    }
  },
  computed: {
    ...mapGetters(['formLabelWidth', 'dynamicColumn'])
  },
  created() {
    this.tableHeight = window.innerHeight - 200
    this.loadPageList()
  },
  methods: {
    formatPayType(row) {
      if (row.payType === 1) {
        return '微信'
      } else if (row.payType === 2) {
        return '支付宝'
      } else if (row.payType === 3) {
        return '管理员直充'
      }
      return ''
    },
    formatState(row) {
      if (row.state === 1) {
        return '待支付'
      } else if (row.state === 2) {
        return '已支付'
      } else if (row.state === 3) {
        return '已关闭'
      }
      return ''
    },
    formatAccount(row) {
      let amount = parseInt(row.amount)
      if (isNaN(amount)) {
        return row.amount
      }
      amount = amount / 100
      let s = amount.toString()
      let idx = s.indexOf('.')
      if (idx < 0) {
        idx = s.length
        s += '.'
      }
      while (s.length < (idx + 3)) {
        s += 0
      }
      return s
    },
    checkColumn(col) {
      if (this.dynamicColumn.chargeRecords.hasOwnProperty(col)) {
        return this.dynamicColumn.chargeRecords[col].show
      }
      return true
    },
    loadPageList() {
      this.listLoading = true
      const param = { ...this.filters, ...this.orderBy }
      listChargeRecords(param).then(({ success, message, data }) => {
        this.listLoading = false
        if (success) {
          const { records, total } = data || {}
          this.list = records
          this.total = total
        } else {
          this.$message({
            message: message || '查询列表失败',
            type: 'error'
          })
        }
      }, () => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.filters.page = 1
      this.loadPageList()
    },
    sortChange({ prop, order }) {
      this.orderBy.orderColumn = prop
      this.orderBy.order = order
      this.handleFilter()
    },
    selsChange(sels) {
      this.sels = sels
    }
  }
}
</script>

<style scoped>

</style>
